<template>
	<view>
		<swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#ffffff" circular="true" autoplay="true" vertical="true">
			<swiper-item><image src="/static/pic1.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="/static/pic2.png" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="/static/pic3.webp" mode="aspectFill"></image></swiper-item>
			<swiper-item><image src="/static/pic4.jpg" mode="aspectFill"></image></swiper-item>
		</swiper>
	</view>
	
	<navigator url="/pages/demo2/demo2">跳转到demo2</navigator>
	
	<view>
		<!-- <image src="/static/logo.png" mode="" class="pic1"></image> -->
		<!-- <image src="/static/pic3.webp" mode="aspectFill" class="pic2"></image> -->
		<!-- <image src="/static/pic4.jpg" mode="widthFix" class="pic3"></image> -->
	</view>
</template>

<script>

</script>

<style lang="scss">
.pic1{
	width: 150rpx;
	height: 150rpx;
	
}
.pic2{
	width: 200rpx;
	height: 200rpx;
}
.pic3{
	width: 300px;
	
}

swiper{
	// 在宽度或者高度中增加vw表示视图的宽度或者高度
	width: 100vw;
	height: 200rpx;
	border: 1px solid green;
	swiper-item{
		width: 100%;
		height: 100%;
		background: pink;
		image{
			width: 100%;
			height: 100%;
		}
	}
	// 控制为双数的显示为橙色
	swiper-item:nth-child(2n){
		background: orange;
	}
}
</style>
